<template>
  <div class="settings-page">
    <a-card :bordered="false">
      <template #title>
        <div class="card-title">系统设置</div>
      </template>

      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="basic" tab="基础设置">
          <a-form :model="basicForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }">
            <a-form-item label="系统名称">
              <a-input v-model:value="basicForm.siteName" placeholder="请输入系统名称" />
            </a-form-item>
            <a-form-item label="系统Logo">
              <a-upload
                list-type="picture-card"
                :show-upload-list="false"
                @change="handleLogoChange"
              >
                <img v-if="basicForm.logo" :src="basicForm.logo" alt="logo" style="width: 100%" />
                <div v-else>
                  <PlusOutlined />
                  <div style="margin-top: 8px">上传</div>
                </div>
              </a-upload>
            </a-form-item>
            <a-form-item label="系统描述">
              <a-textarea
                v-model:value="basicForm.description"
                :rows="4"
                placeholder="请输入系统描述"
              />
            </a-form-item>
            <a-form-item label="联系邮箱">
              <a-input v-model:value="basicForm.email" placeholder="请输入联系邮箱" />
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 4, span: 12 }">
              <a-button type="primary" @click="handleSaveBasic">
                <template #icon>
                  <SaveOutlined />
                </template>
                保存设置
              </a-button>
            </a-form-item>
          </a-form>
        </a-tab-pane>

        <a-tab-pane key="security" tab="安全设置">
          <a-form :model="securityForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }">
            <a-form-item label="登录超时">
              <a-input-number
                v-model:value="securityForm.sessionTimeout"
                :min="1"
                :max="24"
                style="width: 100%"
              />
              <span style="margin-left: 8px">小时</span>
            </a-form-item>
            <a-form-item label="密码强度">
              <a-select v-model:value="securityForm.passwordStrength" style="width: 100%">
                <a-select-option value="low">低</a-select-option>
                <a-select-option value="medium">中</a-select-option>
                <a-select-option value="high">高</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="双因素认证">
              <a-switch v-model:checked="securityForm.twoFactorAuth" />
            </a-form-item>
            <a-form-item label="登录验证码">
              <a-switch v-model:checked="securityForm.captchaEnabled" />
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 4, span: 12 }">
              <a-button type="primary" @click="handleSaveSecurity">
                <template #icon>
                  <SaveOutlined />
                </template>
                保存设置
              </a-button>
            </a-form-item>
          </a-form>
        </a-tab-pane>

        <a-tab-pane key="notification" tab="通知设置">
          <a-form :model="notificationForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }">
            <a-form-item label="邮件通知">
              <a-switch v-model:checked="notificationForm.emailNotification" />
            </a-form-item>
            <a-form-item label="短信通知">
              <a-switch v-model:checked="notificationForm.smsNotification" />
            </a-form-item>
            <a-form-item label="系统消息">
              <a-switch v-model:checked="notificationForm.systemMessage" />
            </a-form-item>
            <a-form-item label="接收频率">
              <a-radio-group v-model:value="notificationForm.frequency">
                <a-radio value="realtime">实时</a-radio>
                <a-radio value="daily">每日汇总</a-radio>
                <a-radio value="weekly">每周汇总</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 4, span: 12 }">
              <a-button type="primary" @click="handleSaveNotification">
                <template #icon>
                  <SaveOutlined />
                </template>
                保存设置
              </a-button>
            </a-form-item>
          </a-form>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { PlusOutlined, SaveOutlined } from '@ant-design/icons-vue'

const activeKey = ref('basic')

const basicForm = reactive({
  siteName: '鹿鸣后台管理系统',
  logo: '',
  description: '一个现代化的后台管理系统',
  email: 'admin@example.com',
})

const securityForm = reactive({
  sessionTimeout: 2,
  passwordStrength: 'medium',
  twoFactorAuth: false,
  captchaEnabled: true,
})

const notificationForm = reactive({
  emailNotification: true,
  smsNotification: false,
  systemMessage: true,
  frequency: 'realtime',
})

const handleLogoChange = (info: any) => {
  if (info.file.status === 'done') {
    message.success('Logo上传成功')
  }
}

const handleSaveBasic = () => {
  message.success('基础设置保存成功')
}

const handleSaveSecurity = () => {
  message.success('安全设置保存成功')
}

const handleSaveNotification = () => {
  message.success('通知设置保存成功')
}
</script>

<style scoped>
.settings-page {
  width: 100%;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
}

:deep(.ant-tabs-tab) {
  font-size: 15px;
}

:deep(.ant-form-item-label > label) {
  font-weight: 500;
}
</style>
